import React, { useEffect, useState } from "react";
import { Space, Table, Tag } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";

import http from "../../api/http";
function Index() {
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    setTitle(values.title)
    setTag(values.tag)
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "描述",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "开始时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "结束时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];

  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState();
  const [title, setTitle] = useState();
  const [tag, setTag] = useState();

  const getList = async () => {
    const params: {
      page: number; //页码  必传
      pageSize: number; //每页显示条数 必传
      keyword?: string; //搜索标题
      tag?: string; //搜索标签
    } = { page, pageSize };
    if (title) params.keyword = title;
    if (tag) params.tag = tag;
    const res = await http.get("/api/article/list", { params });
    console.log(res);
    setData(res.data.rows);
    setTotal(res.data.count);
  };
  useEffect(() => {
    getList();
  }, [page, pageSize,title,tag]);

  const change = (page: number, pageSize: number) => {
    setPage(page);
    setPageSize(pageSize);
  };
  return (
    <div>
      <Form
        name="basic"
        layout="inline"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 1600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="标题"
          name="title"
          // rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="标签"
          name="tag"
          // rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input />
        </Form.Item>

       

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
           搜素
          </Button>
        </Form.Item>
      </Form>
      <Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={{
          total: total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
          onChange: change,
        }}
      />
    </div>
  );
}

export default Index;
